<template>
  <div class="home">
    <div class="home-banner">
      <div class="main">
        <h5>欢迎来到新疆工程建设云</h5>
        <InputSearch class="home-banner__search" placeholder="请输入您要查询的关键词，例如ca、聘用等"
                     size="large" v-model:value="queryRef.search"
                     enter-button="搜 索" @search="handlePressEnter">
          <template #prefix>
            <SearchOutlined :style="{ fontSize: '20px' , color : '#fff'}"/>
          </template>
        </InputSearch>
      </div>

      <div id="Port" class="home-banner__port">
        <div class="home-banner__portList">
          <a class="home-banner__port-item" v-for="(prot, index) in prots" :key="prot.key" @click="goProt(prot.path)">
            <div class="icon" :style="`background-position: -${index*42}px 0`"/>
            <div class="desc">
              <h5>{{prot.label}}</h5>
            </div>
          </a>
        </div>
      </div>
    </div>

    <newsComop />

    <systemComop/>

    <noticeComp/>

    <guideComp/>

<!--    <classroom/>-->
    <Advert />
    <Notice />
    <ModalAwait v-model:visible="awaitVisible"/>
    <ModalPerson v-model:visible="personVisible"/>
    <ModalNotice v-model:visible="NoticeVisible" :NoticeDetail="NoticeDetail"/>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref  } from 'vue';
import { Input,  Modal  } from 'ant-design-vue';
import { SearchOutlined} from '@ant-design/icons-vue';
import { noticeComp, guideComp, systemComop, ModalPerson , newsComop , classroom , ModalNotice} from './components';
import router from '/@/router';
import { parseTime } from '/@/utils';
import Advert from '/@/components/footerComponent/src/advert.vue';
import Notice from '/@/components/footerComponent/src/notice.vue';
import type { configItem } from '/@/api/common';
import {getArticleListApi} from "/@/api/article";
export default defineComponent({
  name: 'Home',
  components: {
    Input , InputSearch: Input.Search, SearchOutlined
    , noticeComp, guideComp, newsComop, ModalNotice,
    systemComop, ModalPerson , classroom, Advert, Notice},
  setup() {

    const prots = ref<configItem[]>([
      { key: 1, path: 'person', label:'个人服务平台'},
      { key: 2, path: 'http://jsy.xjjs.gov.cn:8040/c/uc/login', label:'企业服务平台'},
      { key: 3, path: 'http://jsy.xjjs.gov.cn:8050/g/login', label:'政务服务平台'},
      { key: 4, path: 'http://jsy.xjjs.gov.cn:9011', label:'项目服务平台'},
      { key: 5, path: 'http://jsy.xjjs.gov.cn:9009', label:'建设单位服务平台'},
      { key: 6, path: 'http://220.171.42.84:5031/nologin', label:'建筑工人实名制平台'}
    ])

    const queryRef = ref({
      search: '' ,
      itemType:''
    })
    const personVisible = ref<boolean>(false);
    const awaitVisible = ref<boolean>(false);
    const NoticeVisible = ref<boolean>(false);
    const NoticeDetail = ref<any>({});

    const handleHot = (name) => {
      queryRef.value.search = name;
      handlePressEnter();
    }

    const goProt = (path)=> {
      if (path === 'person') {
        personVisible.value = true;
      } else if (path === 'build' || path === 'project') {
        openAwait();
      } else {
        window.open(path, '_blank');
      }
    }

    const goLink = (path)=>{
      if( path==='close' ){
        Modal.info({
          title: '温馨提示',
          content: '该功能暂时关闭，如有疑问请致电 0991-2822462。',
        });
      }else {
        window.open(path, '_blank');
      }
    }

    const openAwait = ()=> {
      awaitVisible.value = true;
    }

    const getNoticeArticleList = async () => {  //判断有没有紧急通知
      let data = await getArticleListApi({
        itemId: 'cms_urgent_notice',
        current: 1,
        size: 1
      });
      let { total , records  } = data;
      if(total) {
        NoticeDetail.value = records[0];
        NoticeVisible.value = true;
      }
    };

    const init = () => {
      getNoticeArticleList()
    }

    const handlePressEnter = () => {
      let routeUrl = router.resolve({
          path: "/articleList",
          query: queryRef.value
     });
     window.open(routeUrl.href, '_blank');
    }

    onMounted(init);

    return {
      prots,  queryRef, personVisible, awaitVisible, NoticeVisible ,
      handleHot, goProt, goLink, handlePressEnter, parseTime , NoticeDetail
    }
  }
})
</script>

<style lang="less" scoped>
.home {
  .home-common__warp  {
    width: @main-width;
    padding-top: 60px;
    padding-bottom: 100px;
    margin: 0 auto;
  }

  .home-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 600px;
    padding-top: 160px;
    background: url('/src/assets/img/home-banner.png') no-repeat center;
    background-size: cover;

    .main{

      >h5 {
        padding-top: 40px;
        margin-bottom: 40px;
        font-size: 36px;
        line-height: 56px;
        color: @white;
      }

      >.home-banner__search {
        width: 700px;
        height: 64px;
      }

    }

    .home-banner__port {
      position: absolute;
      bottom: 0;
      width: 100%;
      background: rgba(1, 8, 20, .5);
      border-bottom: 1px solid #E0E5EB;

      .home-banner__portList{
        display: flex;
        justify-content: space-between;
        width: 1300px;
        margin: 0 auto;

        .home-banner__port-item {
          position: relative;
          width: 200px;
          height: 106px;
          padding-top: 18px;

          &:first-child{
            &::before{
              display: none;
            }
          }

          &::before {
            position: absolute;
            top: 35px;
            left: 0;
            display: inline-block;
            width: 1px;
            height: 40px;
            background: rgba(255,255,255,.4);
            content: '';
          }

          &:hover {
            .desc {
              >h5, >p {
                color: @white;
              }
            }
          }

          .icon {
            width: 42px;
            height: 42px;
            margin: 0 auto 2px;
            background: url('/src/assets/img/home-banner__port.png') no-repeat;
          }

          .desc {
            font-size: 14px;
            color: @white;

            >h5 {
              margin: 0;
              font-size: 16px;
              line-height: 22px;
              color: @white;
              text-align: center;
            }
          }
        }
      }
    }
  }
}

::v-deep(.ant-input-group){
  .ant-input-search{
    background-color: rgba(255,255,255,0.3);
    border: 1px solid fade(@white,50%);

    input::placeholder{
      color: #fff;
    }
  }

  .ant-input-prefix {
    margin-right: 10px;
    margin-left: 4px;
  }

  .ant-input{
    height: 39px;
    padding-bottom: 3px;
    color: #fff;
    background: transparent;
  }

  .ant-btn-primary{
    height: 54px;
    padding: 0 35px 3px;
    background-color: #CD1922;
    border-color: #CD1922;
    border-radius: 0;
  }

  .ant-input-group-addon{
    background: transparent;
  }

}
</style>

